<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" label-width="100px">

      <h3 class="title-container">nuwa-zero</h3>
      
      <el-form-item prop="commonKey" label="统一认证号">
        <el-input
          ref="commonKey"
          v-model="loginForm.commonKey"
          placeholder="commonKey"
          name="commonKey"
          tabindex="1"
          autocomplete="on"
        />
      </el-form-item>

      <el-form-item prop="authKey" label="密码">
        <el-input
          show-password
          ref="authKey"
          v-model="loginForm.authKey"
          type="password"
          placeholder="authKey"
          name="authKey"
          tabindex="2"
          autocomplete="on"
          @keyup.enter.native="handleLogin"
        />
      </el-form-item>

      <!--<el-form-item>
        <el-link type="primary" @click="$router.push({ path: '/register'})">还没有账号？点击去注册</el-link>
      </el-form-item>-->

      <el-form-item>
        <el-button :loading="loading" type="primary" @click.native.prevent="handleLogin">点击登录</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>

<script>

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        commonKey: '555095835',
        authKey: 'icbc_2022'
      },
      loginRules: {
        commonKey: [{ required: true,  message: '请输入账号', trigger: 'blur' }],
        authKey: [{ required: true,  message: '请输入密码', trigger: 'blur' }]
      },
      loading: false,
      redirect: undefined,
      otherQuery: {}
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  mounted() {
    if (this.loginForm.commonKey === '') {
      this.$refs.commonKey.focus()
    } else if (this.loginForm.authKey === '') {
      this.$refs.authKey.focus()
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
            })
            .catch(() => {
              this.$message.error('登录失败，请稍后再试');
            })
            .finally(()=>{
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>

<style lang="scss" scoped>

.login-container {
  height: 100vh;
  width: 100vw;
  background: url('@/assets/images/login-bg.svg');
  overflow: hidden;
  .login-form {
    width: 300px;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
    .title-container {
      font-size: 26px;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }
}
</style>
